<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript">
    //获取需要放数据的容器
    var containerCart;
    //获取我们定义的模板的dom对象。主要是想获取里面的内容
    var templateCart;
    $(document).ready(function() {
        containerCart = $('#containerCart');
        templateCart = $('#templateCart');
        if (checkLogin(3))
            getCart();

    });
    //获取购物车数据
    function getCart() {
        $.get("${pageContext.request.contextPath}/CartServlet/allCart",function (data) {
             console.log(data);
        /*解析json字符串*/
             data = JSON.parse(data);
            var count = 0; //总金额
            var num = 0;  //餐品总数量
            for (var e of data) {
                count += e.productPrice * e.productNum;
                num += e.productNum;
            }
            count = Math.round(count * 100) / 100;

            $("#cart_image").html(count);
            $("#num").html(num);
            //编译模板的里的内容
            var template = Handlebars.compile(templateCart.html());
            //把后台获取到的数据渲染到页面
            containerCart.html(template(data));
        })

    }
    //加减数据
    function sa(num,id) {
        //商品减到0删除数据
        if (num==0){
            $.get("${pageContext.request.contextPath}/CartServlet/deleteCart?cartId="+id,function (data) {
            });
        }else {
            $.get("${pageContext.request.contextPath}/CartServlet/save?cartId="+id+"&productNum="+num,function(){});
        }
        getCart();
    }
    //清空购物车
    function delAll() {
        $.get("${pageContext.request.contextPath}/CartServlet/deleteCart",function (data) {
        });
        getCart();
    }
    //选好了
    function submitOrder() {
        let sum = $("#cart_image").text();
        if (sum>0){
            location.href="${pageContext.request.contextPath}/AddressServlet/shipAddress?sum="+sum;
        }else {
          layer.alert("请选中商品");
        }
    }

</script>
<div class="m-shopping" id="cart">
    <div class="m-cart">
        <div id="close">
            <img src="${pageContext.request.contextPath}/images/common/close.png" class="m-img" />
        </div>
        <span> 我的购物盒</span>
        <a href="#" onclick="delAll()">清空购物盒</a>
    </div>
    <div id="containerCart">
        <script type="text/x-handlebars-template" id="templateCart">
        {{#each this}}
        <div class="border-bot eat">
            <div class=" eat-left fl">
                <img src="/show/{{productPic}}" />
                <span>{{productName}}</span>
                <br />
                <span class="login-redcolor">{{productPrice}}元</span>
            </div>
            <div class="fr  eat-right">
                <font style="font-size: 50px;" onclick="sa({{productNum}}-1,{{cartId}})">-</font>
                <input type="text" placeholder="{{productNum}}" />
                <font  style="font-size: 50px;" onclick="sa({{productNum}}+1,{{cartId}})">+</font>
            </div>
        </div>
        {{/each}}
         </script>

    </div>
    <div class="login-bgrcolor eat-bot" id="cart_show">

        <img src="${pageContext.request.contextPath}/images/menu/box.png" class="e-img" />
        <span class="e-top login-redcolor" id="num">2</span><strong class="e-title1">总计<span
            class="e-bigfont" id="cart_image"></span><span></span>
    </strong>
        <a href="#" onclick="submitOrder()" style="font-size: 24px;margin-left: 100px; color: white">选好了</a>

    </div>
</div>